<template>
  <div class="live_broadcast">
    <div class="liveContainer">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="线下技术交流讲座" name="first">
          <talkLecture></talkLecture>
        </el-tab-pane>

        <el-tab-pane label="线上洽谈" name="second">
          <liveTalk></liveTalk>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import talkLecture from "./talkLecture";
import liveTalk from "./liveTalk";
export default {
  name: "live_broadcast",
  components: {
    liveTalk,
    talkLecture,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang='less' scoped>
.live_broadcast {
  font-size: 0.16rem;
  .liveContainer {
    width: 15.79rem;
    // height: 7.69rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    margin: 0.3rem 0 0 0.3rem;
    padding-left: 0.3rem;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
  }
}
/deep/ .el-tabs__item.is-active {
  color: #004cb3;
  font-size: 0.18rem;
}
/deep/ .el-tabs__item {
  font-size: 0.18rem;
  margin-top: 0.2rem;
  font-weight: bold;
}
/deep/ .el-tabs__nav-wrap::after {
  background-color: #eeeeee;
  height: 1px;
}
/deep/ .el-tabs__item:hover {
  color: #004cb3;
  font-weight: bold;
}
/deep/ .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #004cb3;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
}
</style>
